<template>
	<view>
		<view class="">
			<uni-nav-bar title="发布方"></uni-nav-bar>
			<uni-icons type="back" size="30" class="titleBack" @click="goBack"></uni-icons>
		</view>
		<!-- 1 -->
		<view class="top">
			<view class="left">
				<img src="http://localhost:8080/static/img/touxiang.4912f8be.png" alt="">
			</view>
			<view class="right">
				<view class="">
					<text>昵称</text>
					<text></text>
				</view>
				<view class="right-1">
					<text>区域</text>
					<text>公司昵称</text>
				</view>
			</view>
		</view>
		<!-- 2 -->
		<view class="content">
			<view class="menu">
				<view :class="{active:cut == index?true:false}" v-for="item,index in list" :key="index" @click="onClick(index)">
					{{item}}
				</view>
			</view>
			<view class="bottom" @click="handerClick">
				<view class="left-img">
					<img src="http://localhost:8080/static/img/info.1860c08b.jpg" alt="">
				</view>
				<view class="right-text">
					<view class="right-text1">
						门店位置说明
					</view>
					<view class="right-text2">
						<text>区域</text>
						<text>店面位置</text>
					</view>
					<view class="right-text3">
						<text class="z">7000/月</text>
						<text class="z1">...</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 3 -->
		<view class="dibu">
			<button>在线咨询</button>
			<button>电话咨询</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['房源','加盟','合伙','管家'],
				cut:0
			};
		},
		methods: {
			// 返回
			goBack() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 切换导航菜单
			onClick(index) {
				this.cut = index
			},
			// 跳转到商铺出租详情
			handerClick() {
				uni.navigateTo({
					url: '/pages/lease/details',
				})
			}
		}
	}
</script>

<style lang="scss">
.titleBack {
		position: absolute;
		top: 20rpx;
		font-size: 60rpx;
		color: #ccc;
	}
	.top {
		display: flex;
		width: 100%;
		height: 300rpx;
		border: 1rpx solid #ccc;
		.left {
			width: 200rpx;
			height: 200rpx;
			padding: 43rpx;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.right {
			padding-top: 43rpx;
			.right-1 {
				margin-top: 30rpx;
				text {
					margin-right: 100rpx;
				}
			}
		}
	}
	.content {
		padding: 20rpx;
		.menu {
			display: flex;
			view {
				margin-right: 100rpx;
				padding-bottom: 15rpx;
			}
		}
		.bottom {
			display: flex;
			margin-top: 20rpx;
			.left-img {
				margin-right: 20rpx;
				img {
					width: 200rpx;
					height: 200rpx;
				}
			}
			.right-text {
				flex: 1;
				padding: 10rpx 0;
				box-sizing: border-box;
				.right-text2 {
					margin: 30rpx 0;
					text {
						margin-right: 50rpx;
					}
				}
				.right-text3 {
					display: flex;
					justify-content: space-between;
					padding-right: 20rpx;
					.z {
						color: red;
					}
					.z1 {
						font-size: 60rpx;
					}
				}
			}
		}
	}
	.dibu {
		position: fixed;
		bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		button {
			width: 47.5%;
			font-size: 24rpx;
			border: 1rpx solid #ccc;
			line-height: 100rpx;
			text-align: center;
			margin: 0;
		}
	}
	.active {
		border-bottom: 1rpx solid #000;
	}
</style>
